<html>
<head>
    <meta charset="UTF-8">

    <!-- Remove this line if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width">

    <meta name="description" content="Designa Studio, a HTML5 / CSS3 template.">
    <meta name="author" content="Sylvain Lafitte, Web Designer, sylvainlafitte.com">

    <link type="text/css" rel="stylesheet" href="HelloUIBinder.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>


    <script type="text/javascript" language="javascript" src="HelloUIBinder/HelloUIBinder.nocache.js"></script>


    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

    <!--[if (gte IE 6)&(lte IE 8)]>
    <script src="js/selectivizr.js"></script>
    <![endif]-->

    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/scripts.js"></script>

    <!--<script type="text/javascript" charset="utf-8">-->
    <!--//        $(window).load(function() {-->
    <!--////            $('.flexslider').flexslider();-->
    <!--//            $('.flexslider').flexslider({-->
    <!--//                smoothHeight: true,-->
    <!--//                controlNav: false,-->
    <!--//                directionNav: true,-->
    <!--//                prevText: "&larr;",-->
    <!--//                nextText: "&rarr;"-->
    <!--////                selector: ".slides > .slide"-->
    <!--//            });-->
    <!--//        });-->

    <!--$(window).load(function () {-->
    <!--$('.flexslider').flexslider({-->
    <!--smoothHeight: true,-->
    <!--controlNav: false,-->
    <!--directionNav: true,-->
    <!--prevText: "&larr;",-->
    <!--nextText: "&rarr;"-->
    <!--//                selector: ".slides > .slide"-->
    <!--});-->
    <!--});-->
    <!--</script>-->

    <script type="text/javascript" language="javascript">
        document.fooRunner = function foo() {
//            $(window).load(function () {

            setTimeout(function () {
                $('.flexslider').flexslider({
                    smoothHeight: true,
                    controlNav: false,
                    directionNav: true,
                    prevText: "&larr;",
                    nextText: "&rarr;",
                    selector: ".slides > .slide"
                });


                function filterPath(string) {
                    return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
                }

                var locationPath = filterPath(location.pathname);
                var scrollElem = scrollableElement('html', 'body');
                $('a[href*=#nav]').each(function () {
                    var thisPath = filterPath(this.pathname) || locationPath;
                    if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
                        var $target = $(this.hash), target = this.hash;
                        if (target) {
                            var targetOffset = $target.offset().top;
                            $(this).click(function (event) {
                                event.preventDefault();
                                $(scrollElem).animate({scrollTop: targetOffset}, 'slow', function () {
                                    location.hash = target;
                                });
                            });
                        }
                    }
                });
                function scrollableElement(els) {
                    for (var i = 0, argLength = arguments.length; i < argLength; i++) {
                        var el = arguments[i], $scrollElement = $(el);
                        if ($scrollElement.scrollTop() > 0) {
                            return el;
                        } else {
                            $scrollElement.scrollTop(1);
                            var isScrollable = $scrollElement.scrollTop() > 0;
                            $scrollElement.scrollTop(0);
                            if (isScrollable) {
                                return el;
                            }
                        }
                    }
                    return[];
                }


// TOGGLES
                $('.toggle-view li').click(function () {
                    var text = $(this).children('.toggle');

                    if (text.is(':hidden')) {
                        text.slideDown('fast');
                        $(this).children('.toggle-title').addClass('tactive');
                    } else {
                        text.slideUp('fast');
                        $(this).children('.toggle-title').removeClass('tactive');
                    }
                });


//TABS
                var tabContents = $(".tab_content").hide(),
                        tabs = $("ul.tabs li");

                tabs.first().addClass("active").show();
                tabContents.first().show();

                tabs.click(function () {
                    var $this = $(this),
                            activeTab = $this.find('a').attr('href');

                    if (!$this.hasClass('active')) {
                        $this.addClass('active').siblings().removeClass('active');
                        tabContents.hide().filter(activeTab).fadeIn();
                    }
                    return false;
                });


// OPACITY
                $(".zoom").css({"opacity": 0});
                $(".zoom").hover(
                        function () {
                            $(this).stop().animate({ "opacity": 0.9 }, 'slow');
                            $(this).siblings('img').stop().animate({ "opacity": 0.7 }, 'fast');
                        },

                        function () {
                            $(this).stop().animate({ "opacity": 0 }, 'fast');
                            $(this).siblings('img').stop().animate({ "opacity": 1 }, 'fast');
                        });


// PORTFOLIO sorting
                // NAV
                $('.works-page aside menu a').click(function () {
                    $(this).addClass("buttonactive").siblings().removeClass("buttonactive")
                });
                // SELECTION
                $("#work_1").click(function () {
                    $(".works figure").not(".work_1").stop().fadeTo("normal", 0.1);
                    $(".work_1").stop().fadeTo("normal", 1);
                });

                $("#work_2").click(function () {
                    $(".works figure").not(".work_2").stop().fadeTo("normal", 0.1);
                    $(".work_2").stop().fadeTo("normal", 1);
                });

                $("#work_3").click(function () {
                    $(".works figure").not(".work_3").stop().fadeTo("normal", 0.1);
                    $(".work_3").stop().fadeTo("normal", 1);
                });

                $("#work_all").click(function () {
                    $(".works figure").stop().fadeTo("normal", 1);
                });


// CONTACT form validation
                if (jQuery().validate) {
                    $("#contact_form").validate();
                }
                ;
//            });
            }, 100);
        }
    </script>
</head>

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic ui         -->
<!--                                           -->
<body class="stripes">
</body>
</html>

<!--<h1>Sample Application</h1>-->
<!--<p>-->
<!--This is an example of a host page for the App application.-->
<!--You can attach a Web Toolkit module to any HTML page you like,-->
<!--making it easy to add bits of AJAX functionality to existing pages-->
<!--without starting from scratch.-->
<!--</p>-->
<!--<table align="center">-->
<!--<tr>-->
<!--<td id="slot1"></td>-->
<!--<td id="slot2"></td>-->
<!--</tr>-->
<!--</table>-->
